<template>
  <div ref="statementHostedItemDetail" class="hostedItemDetail">
    <!--top-->
    <div class="hostedItemDetail-top">
      <!--标签-->
      <h1 class="top-nav-title">寄存详情</h1>
      <div class="flexRBS">
        <!--lf-->
        <div class="top-lf">
          <div class="lf-item flexRSC">
            <h4>凭证号</h4>
            <h5>{{ detailOrder.code }}</h5>
          </div>
          <div class="lf-item flexRSC">
            <h4>寄存时间</h4>
            <h5>{{ detailOrder.createTime }}</h5>
          </div>
          <div class="lf-item flexRSC">
            <h4>到期日期</h4>
            <h5>{{ detailOrder.expireTime }}</h5>
          </div>
          <div class="lf-item flexRSC">
            <h4>支取时间</h4>
            <h5>{{ detailOrder.takeTime }}</h5>
          </div>
        </div>
        <!--ct-->
        <div class="top-ct">
          <div class="lf-item flexRSC">
            <h4>寄存门店</h4>
            <h5>{{ detailOrder.shopName }}</h5>
          </div>
          <div class="lf-item flexRSC">
            <h4>寄存仓库</h4>
            <h5>{{ detailOrder.warehouseName }}</h5>
          </div>
          <div class="lf-item flexRSC">
            <h4>支取门店</h4>
            <h5>{{ detailOrder.takeShopName }}</h5>
          </div>
        </div>
        <!--rt-->
        <div class="top-rt no-print">
          <div style="margin-bottom: 20px" class="flexREC">
            <el-button size="medium" round @click.prevent="backBtn">返回</el-button>
            <el-button size="medium" round @click="print">打印</el-button>
          </div>
          <div class="flexRBS">
            <div class="rt-lf colCAE">
              <h4>寄存状态</h4>
              <h2 v-if="detailOrder.status===0">待支取</h2>
              <h2 v-if="detailOrder.status===1">已支取</h2>
              <h2 v-if="detailOrder.status===2">已过期</h2>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--bottom-->
    <div class="hostedItemDetail-bottom flexRBS">
      <div class="bottom-lf">
        <!--blf top -->
        <div class="blf-top">
          <h2 style="font-weight: bold">寄存顾客</h2>
          <div class="blf-top-item flexRSS">
            <h4>姓名</h4>
            <h5>{{ detailOrder.ownerName }}</h5>
          </div>
          <div class="blf-top-item flexRSC">
            <h4>手机号</h4>
            <h5>{{ detailOrder.ownerPhone }}</h5>
          </div>
        </div>
        <div class="blf-top">
          <h2 style="font-weight: bold">寄存的物品</h2>
          <div class="jc-container-btn">
            <div v-for="(item,index) in detailGoods" :key="index" class="blf-top-item-top flexRSS">
              <h4>{{ item.goodName }}</h4>
              <h5>{{ item.num }}</h5>
            </div>
          </div>
        </div>

        <!--续存记录-->
        <div v-if="renewRecordData.length" class="blf-top">
          <h2 style="font-weight: bold">续存记录</h2>
          <div class="jc-container-btn">
            <div class="dialog-orderTracking-body flexRSS">
              <div class="trackStatus-lf">
                <div v-for="(dItem,index) in renewRecordData" :key="index" class="lf-item colCCA">
                  <i class="el-icon-circle-check sucess-icon" />
                  <!--分割条-->
                  <h3 v-if="index<(renewRecordData.length-1)" />
                </div>
              </div>
              <div class="trackStatus-rt">
                <div v-for="(dItemS,indexS) in renewRecordData" :key="indexS" class="rt-item">
                  <h2>{{ dItemS.createTime }}</h2>
                  <h3>续存来源: {{ dItemS.source===1?"顾客":"员工" }}</h3>
                  <h3 v-if="dItemS.source===2">续存人员: {{ dItemS.operatorName }}</h3>
                  <h3 v-if="dItemS.type">续存方式: {{ dItemS.type?"免费续存":"会员特权续存" }}</h3>
                  <h3 v-else>续存方式: 员工续存</h3>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom-rt">
        <!--寄存单-->
        <div class="btr-top">
          <h2 style="font-weight: bold">寄存单</h2>
          <!--此处开始遍历-->
          <div
            v-for="(item,key,index) in detailOrder.depositInfo"
            :key="index"
            class="center-item flexRSC"
          >
            <h4>{{ key }}</h4>
            <h5>{{ item }}</h5>
          </div>
        </div>
        <!--支取单-->
        <div v-if="detailOrder.status===1&&detailOrder.takeInfo" class="btr-top">
          <h2 style="font-weight: bold">支取单</h2>
          <!--此处开始遍历-->
          <div
            v-for="(item,key,index) in detailOrder.takeInfo"
            :key="index"
            class="center-item flexRSC"
          >
            <h4>{{ key }}</h4>
            <h5>{{ item }}</h5>
          </div>
        </div>
        <!-- 操作人信息 -->
        <div class="btr-top">
          <h2 style="font-weight: bold">寄存操作人信息</h2>
          <div class="center-item flexRSC">
            <h4>寄存操作人</h4>
            <h5>{{ detailOrder.operator||'-' }}</h5>
          </div>
          <div class="center-item flexRSC">
            <h4>寄存操作人编号</h4>
            <h5>{{ detailOrder.operatorId||'-' }}</h5>
          </div>
          <div class="center-item flexRSC">
            <h4>寄存终端</h4>
            <h5>{{ detailOrder.endpoint||'-' }}</h5>
          </div>
        </div>
        <div v-if="detailOrder.status===1" class="btr-top">
          <h2 style="font-weight: bold">支取操作人信息</h2>
          <div class="center-item flexRSC">
            <h4>支取操作人</h4>
            <h5>{{ detailOrder.takeOperator||'-' }}</h5>
          </div>
          <div class="center-item flexRSC">
            <h4>支取操作人编号</h4>
            <h5>{{ detailOrder.takeOperatorId||'-' }}</h5>
          </div>
          <div class="center-item flexRSC">
            <h4>支取终端</h4>
            <h5>{{ detailOrder.takeEndpoint||'-' }}</h5>
          </div>
        </div>
      </div>
    </div>
    <!--取消订单和确认订单弹框-->
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      renewRecordData: '',
      code: 1060439216756224,
      subStatus: 1, // 1待商家确认 2待消费 3已消费 4支付超时 5超时未确认 7用户已取消 8商家已取消
      statusObj: {
        statusTitle: '待商家确认',
        statusColor: '#666'
      },
      backPage: '',
      /* 请求的数据*/
      subOrder: { bizData: {} },
      subProduct: {},
      statusRecords: {},
      roomPricesKey: [],
      detailGoods: [],
      detailOrder: []
    }
  },
  computed: {
    // ...mapGetters(["userInfo"])
  },
  watch: {},
  created() {},
  mounted() {
    console.log('传递过来的数据')
    console.log(this.$route.query)
    if (this.$route.query.orderCode) {
      this.orderCode = this.$route.query.orderCode
      this.backPage = this.$route.query.page
    }
    console.log(this.$route.query)
    this.getOrderDetailReq()
  },
  destroyed() {},
  methods: {
    /* 按钮点击*/
    qxOrderBtn() {
      this.$refs.QxOrderDialog.diaLogShow(this.subOrder)
    },
    confirmOrderBtn() {
      this.$refs.ConfirmOrder.diaLogShow(this.subOrder)
    },
    // 结算账单
    jsBillBtn() {
      this.$refs.JsBill.diaLogShow(this.refundRecord)
    },
    // 顾客已到店
    confirmArrShop() {
      const data = {
        cancelReason: '',
        orderNo: this.orderCode,
        status: 2
      }
      this.changeOrderStatusReq(data)
    },
    // 打印
    print() {
      this.$print(this.$refs.statementHostedItemDetail)
    },
    // 返回
    backBtn() {
      this.$router.push({
        name: this.backPage,
        query: { page: 'DepositOrderRecord', orderNo: this.orderNo }
      })
    },

    /* other*/
    /* 数据请求*/

    renewRecordReq() {
      const data = {
        orderCode: this.orderCode
      }
      this.khReqMethod({
        url: '/depositAdmin/mchWxApp/renewRecord',
        data,
        method: 'get',
        isParams: true,
        isLoading: true
      }).then(async res => {
        // 数据处理
        this.renewRecordData = res.data
      })
    },
    // 获取订单详情
    getOrderDetailReq() {
      const data = {
        orderCode: this.orderCode
      }
      this.khReqMethod({
        url: '/depositAdmin/mchWxApp/orderDetail',
        data,
        method: 'get',
        isParams: true,
        isLoading: true
      }).then(async res => {
        // 数据处理
        const data = res.data
        // 处理数据
        if (data.order.takeInfo) {
          data.order.takeInfo = JSON.parse(data.order.takeInfo)
        }
        if (data.order.depositInfo) {
          data.order.depositInfo = JSON.parse(data.order.depositInfo)
        }
        if (data.order.renew) {
          this.renewRecordReq()
        }

        this.detailGoods = data.goods
        this.detailOrder = data.order
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .hostedItemDetail {
  }
  /*顶部*/
  .hostedItemDetail-top {
    background: #fff;
    padding: 0 15px;
    padding-top: 10px;
    border-radius: 6px;
    padding-bottom: 15px;
    .top-lf {
      .lf-item {
        margin-top: 15px;
        h4 {
          min-width: 100px;
          text-align: left;
          font-size: 14px;
          font-weight: 400;
          color: #333;
        }
        h5 {
          font-size: 14px;
          font-weight: 400;
          color: #666;
        }
      }
    }
    .top-ct {
      .lf-item {
        margin-top: 15px;
        h4 {
          min-width: 100px;
          text-align: left;
          font-size: 14px;
          font-weight: 400;
          color: #333;
        }
        h5 {
          font-size: 14px;
          font-weight: 400;
          color: #666;
        }
      }
    }
    .top-rt {
      margin-top: -30px;
      .rt-lf {
        height: 80px;
        padding: 0 10px;
        text-align: right;
        min-width: 220px;
        h4 {
          color: #333;
        }
        h2 {
          font-size: 20px;
          color: #bc8e44;
        }
      }
      .rt-rt {
        margin-left: 20px;
        height: 80px;
        padding: 0 10px;
        text-align: right;
        h4 {
          color: #333;
        }
        h2 {
          font-size: 20px;
          color: #000;
          font-weight: 400;
        }
      }
      //返回按钮
      .fh-btn {
        width: 100%;
        text-align: right;
        margin: 20px auto;
      }
    }
  }
  /*trackingModal*/
  .dialog-orderTracking-body {
    //modal弹框部分
    padding: 15px;
    padding-left: 0;
    .trackStatus-lf {
      .sucess-icon {
        width: 20px;
        height: 20px;
        font-size: 20px;
      }
      h3 {
        width: 1px;
        height: 74px;
        background: #a3a3a3;
      }
    }
    .trackStatus-rt {
      margin-left: 20px;
      .rt-item {
        h2 {
          font-size: 15px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(56, 56, 56, 1);
        }
        h3 {
          margin-top: 10px;
          font-size: 13px;
          font-family: SourceHanSansSC-Regular;
          font-weight: 400;
          color: rgba(163, 163, 163, 1);
        }
      }
      .rt-item:not(:last-child) {
        margin-bottom: 25px;
      }
    }
  }
  //底部
  .hostedItemDetail-bottom {
    margin-top: 8px;
  }
  //底部top-lf
  .bottom-lf {
    width: 49%;
    .blf-top {
      padding: 15px;
      border-radius: 5px;
      background: #fff;
      margin-bottom: 10px;
      .blf-top-item {
        .list-item {
          display: inline-block;
          min-width: 30px;
          margin-bottom: 10px;
        }
        margin-top: 15px;
        h4 {
          //价格：
          font-size: 14px;
          color: #333;
          min-width: 100px;
        }
        .csItem-cell {
          margin-bottom: 10px;
          flex-wrap: wrap;
        }
      }
      h2 {
        font-weight: 500;
        margin-bottom: 14px;
      }
    }
    /*寄存的物品*/
    .jc-container-btn {
      .blf-top-item-top {
        margin-bottom: 15px;
        h4 {
          font-size: 12px;
          color: #666;
          width: 200px;
          font-weight: 100;
        }
        h5 {
          font-size: 12px;

          color: #666;
          font-weight: 100;
        }
      }
      .blf-top-item {
        margin-top: 0;
        height: 50px;
        border-top: 1px solid #e4e4e4;
        h4 {
          font-weight: bold;
          line-height: 50px;
          width: 200px;
        }
        h5 {
          font-weight: bold;
          line-height: 50px;
        }
      }
    }
    //预订资源

    .blf-center {
      padding-bottom: 20px;

      .center-item {
        margin-top: 15px;
        h4 {
          min-width: 100px;
          text-align: left;
          font-size: 12px;
          font-weight: 400;
          color: #333;
        }
        h5 {
          font-size: 12px;
          font-weight: 400;
          color: #666;
        }
      }
    }
    //费用明细
    .blf-bottom {
      margin-top: 20px;
      .btn-item {
        margin-top: 25px;
        h2 {
          min-width: 100px;
          font-size: 14px;
          color: #666;
        }
        h4 {
          font-size: 14px;
          color: #666;
          width: 200px;
          text-align: left;
        }
        h3 {
          text-align: left;
        }
        //房费
        .ff-item {
          .item-cell {
            margin-bottom: 10px;
          }
          h3 {
            flex: 1;
            text-align: right;
          }
          h2 {
            width: 200px;
          }
        }
      }
    }
    /*结算按钮*/
    .bill-btn {
      text-align: center;
      margin-top: 20px;
      border-top: 1px solid #e4e4e4;
      padding: 20px 0;
    }
  }

  //底部top-rt
  .bottom-rt {
    width: 49%;
    //预订顾客信息
    .btr-top {
      padding: 15px;
      border-radius: 5px;
      background: #fff;
      margin-bottom: 6px;
      .center-item {
        margin-top: 20px;
        h4 {
          width: 120px;
          text-align: left;
          font-size: 12px;
          font-weight: 400;
          color: #333;
        }
        h5 {
          font-size: 12px;
          font-weight: 400;
          color: #666;
        }
      }
    }
    //审核人
    .btr-btn {
      padding: 15px;
      border-radius: 5px;
      background: #fff;
      margin-bottom: 6px;
      .center-item {
        margin-top: 20px;
        h4 {
          width: 90px;
          text-align: left;
          font-size: 12px;
          font-weight: 400;
          color: #333;
        }
        h5 {
          font-size: 12px;
          font-weight: 400;
          color: #666;
        }
        .item-lf {
          width: 200px;
        }
        .item-rt {
          margin-left: 30px;
          h5 {
            width: 140px; //时间字段
          }
        }
      }
    }
  }
</style>
